<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <title>支付宝小程序使用指南 | liuz2&#39;s Blog</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <meta name="generator" content="Hugo 0.63.1" />
    
    
      <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    

    
    
      <link href="/dist/css/app.9576afd3b3c158d98f48ec5df01fec6a.css" rel="stylesheet">
    

    

    
      

    

    

    <meta property="og:title" content="支付宝小程序使用指南" />
<meta property="og:description" content="涵盖支付宝小程序最常用的使用场景，包括获取用户授权，支付，全局配置参数等。" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://liuz2.gitee.io/posts/alipay-mp-usage/" />
<meta property="article:published_time" content="2020-06-28T21:49:06+08:00" />
<meta property="article:modified_time" content="2020-06-28T21:49:06+08:00" />
<meta itemprop="name" content="支付宝小程序使用指南">
<meta itemprop="description" content="涵盖支付宝小程序最常用的使用场景，包括获取用户授权，支付，全局配置参数等。">
<meta itemprop="datePublished" content="2020-06-28T21:49:06&#43;08:00" />
<meta itemprop="dateModified" content="2020-06-28T21:49:06&#43;08:00" />
<meta itemprop="wordCount" content="181">



<meta itemprop="keywords" content="支付宝小程序," /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="支付宝小程序使用指南"/>
<meta name="twitter:description" content="涵盖支付宝小程序最常用的使用场景，包括获取用户授权，支付，全局配置参数等。"/>

	
  </head>

  <body class="ma0 avenir bg-white">

    
   
  

  <header>
    <div class="bg-black">
      <nav class="pv3 ph3 ph4-ns" role="navigation">
  <div class="flex-l justify-between items-center center">
    <a href="/" class="f3 fw2 hover-white no-underline white-90 dib">
      
        liuz2&#39;s Blog
      
    </a>
    <div class="flex-l items-center">
      

      
        <ul class="pl0 mr3">
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/about/" title="About page">
              About
            </a>
          </li>
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/links/" title="Links page">
              Links
            </a>
          </li>
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/timeline/" title="Timeline page">
              Timeline
            </a>
          </li>
          
        </ul>
      
      















    </div>
  </div>
</nav>

    </div>
  </header>



    <main class="pb7" role="main">
      
  
  <article class="flex-l flex-wrap justify-between mw8 center ph3">
    <header class="mt4 w-100">
      <h1 class="f3 athelas mt3 mb1">支付宝小程序使用指南</h1>
      
      
      <time class="f6 mv1 dib tracked" datetime="2020-06-28T21:49:06&#43;08:00">June 28, 2020</time>

      
      
    </header>
    <div class="nested-copy-line-height lh-copy sans-serif f5 nested-links nested-img mid-gray pr4-l w-two-thirds-l"><h2 id="用户授权">用户授权</h2>
<p><a href="https://opendocs.alipay.com/mini/introduce/authcode" title="用户授权">用户授权</a>的流程图如下：</p>
<p><img src="./alipay-mp-auth.png" alt="Alipay Auth"></p>
<p>官方文档明文规定：<strong>禁止小程序首屏引导用户授权</strong>，需在用户充分了解小程序业务的前提下，自主决定是否允许授权。</p>
<p>所有支付宝开放平台的用户信息的读写均需要经过用户的许可才允许开发者使用，用户授权基于国际标准的 OAuth2.0 授权机制，基于此机制开发者可以获取支付宝用户信息、给用户发会员卡等。</p>
<p>术语解释：</p>
<ul>
<li><code>scope</code>: 授权范围，一个 scope 表示开发者需要请求用户授权的权限范围</li>
<li><code>auth_code</code>: 授权码，临时的用户授权凭证，需要及时换取授权令牌</li>
<li><code>access_token</code>/<code>auth_token</code>: 授权令牌（或访问令牌），长时效的授权凭证，用于调用 openapi.alipay.com 网关进行服务端授权接口调用</li>
<li><code>refresh_token</code>: 刷新令牌，用于在授权令牌过期后刷新重新获取新的授权令牌</li>
</ul>
<p>scopes 列表</p>
<ul>
<li><code>auth_base</code>: 静默授权，在客户端获取 <code>auth_code</code>，传入服务端获取支付宝会员标识 <code>user_id</code></li>
<li><code>auth_user</code>: 主动授权，需要用户手动同意，用于支付宝登录和获取用户信息（现已升级为“获取会员基础信息”）</li>
<li><code>auth_zhima</code>: 用户芝麻信息</li>
</ul>
<h3 id="获取授权码">获取授权码</h3>
<p>获取授权码使用 <code>my.getAuthCode()</code>，具体代码如下：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">my</span>.<span style="color:#a6e22e">getAuthCode</span>({
    <span style="color:#a6e22e">scopes</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;auth_base&#39;</span>,
    <span style="color:#a6e22e">success</span><span style="color:#f92672">:</span> ({ <span style="color:#a6e22e">authCode</span> }) =&gt; {
        <span style="color:#a6e22e">my</span>.<span style="color:#a6e22e">alert</span>({
            <span style="color:#a6e22e">content</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">authCode</span>,
        });
    }
})
</code></pre></div><h3 id="获取会员基础信息">获取会员基础信息</h3>
<p>获取会员基础信息可以使用 <code>my.getOpenUserInfo()</code> 接口，具体介绍参见<a href="https://opendocs.alipay.com/mini/introduce/twn8vq" title="获取会员基础信息">官方文档</a>。以下是简单 demo:</p>
<blockquote>
<p>开发者需要使用 button 组件唤起授权框，添加属性 <code>open-type=&quot;getAuthorize&quot;</code> 用于支持用户授权。</p>
</blockquote>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">&lt;<span style="color:#f92672">button</span> <span style="color:#a6e22e">open-type</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;getAuthorize&#34;</span>
    <span style="color:#a6e22e">onGetAuthorize</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;onGetAuthorize&#34;</span>
    <span style="color:#a6e22e">onError</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;onAuthError&#34;</span>
    <span style="color:#a6e22e">scope</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;userInfo&#34;</span>&gt;
&lt;/<span style="color:#f92672">button</span>&gt;
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#a6e22e">Page</span>({
    <span style="color:#a6e22e">onGetAuthorize</span>() {
        <span style="color:#a6e22e">my</span>.<span style="color:#a6e22e">getOpenUserInfo</span>({
            <span style="color:#a6e22e">fail</span><span style="color:#f92672">:</span> (<span style="color:#a6e22e">error</span>) =&gt; {
                <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">error</span>);
            },

            <span style="color:#a6e22e">success</span><span style="color:#f92672">:</span> (<span style="color:#a6e22e">res</span>) =&gt; {
                <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">userInfo</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">parse</span>(<span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">response</span>).<span style="color:#a6e22e">response</span>;
                <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">userInfo</span>);
            }
        })
    }
})
</code></pre></div><h2 id="支付">支付</h2>
<p>小程序支付的文档在<a href="https://opendocs.alipay.com/mini/introduce/pay" title="小程序支付">这里</a>。</p>
<p>支付完成后，可以根据支付宝交易号（<code>trade_no</code>）将订单信息同步到“订单中心”小程序。</p>
<p>小程序支付调用流程如下：</p>
<p><img src="./alipay-mp-payment.png" alt="Alipay MP Payment"></p>
<p>具体代码如下：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#75715e">// 使用 my.request，连接商户服务器
</span><span style="color:#75715e"></span><span style="color:#a6e22e">my</span>.<span style="color:#a6e22e">request</span>({
    <span style="color:#a6e22e">url</span>,
    <span style="color:#a6e22e">method</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;POST&#39;</span>,
    <span style="color:#a6e22e">data</span><span style="color:#f92672">:</span> {
        <span style="color:#a6e22e">from</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;xxx&#39;</span>,
        <span style="color:#a6e22e">order</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;xxx&#39;</span>,
    },
    <span style="color:#a6e22e">success</span>(<span style="color:#a6e22e">res</span>) {
        <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#39;success&#39;</span>);
    }
})

<span style="color:#75715e">// 服务端调用 alipay.trade.create（统一收单交易创建接口），获得支付宝交易号 tradeNO，代码略
</span><span style="color:#75715e"></span>
<span style="color:#75715e">// 在小程序端调用 my.tradePay() 接口，传入 tradeNO，唤起支付收银台
</span><span style="color:#75715e"></span><span style="color:#a6e22e">my</span>.<span style="color:#a6e22e">tradePay</span>({
    <span style="color:#a6e22e">tradeNO</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;xxx&#39;</span>,
    <span style="color:#a6e22e">success</span>(<span style="color:#a6e22e">res</span>) {
        <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">res</span>);
    },
    <span style="color:#a6e22e">fail</span>(<span style="color:#a6e22e">err</span>) {
        <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">err</span>);
    }
});
</code></pre></div><h2 id="appjson-全局配置7"><a href="https://opendocs.alipay.com/mini/framework/app-json" title="app.json 全局配置">app.json 全局配置</a></h2>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-json" data-lang="json">{
    <span style="color:#f92672">&#34;pages&#34;</span>: [
        <span style="color:#e6db74">&#34;pages/index/index&#34;</span>,
        <span style="color:#e6db74">&#34;pages/logs/index&#34;</span>
    ],
    <span style="color:#f92672">&#34;window&#34;</span>: {
        <span style="color:#f92672">&#34;defaultTitle&#34;</span>: <span style="color:#e6db74">&#34;Demo&#34;</span>
    },
    <span style="color:#f92672">&#34;tabBar&#34;</span>: {
        <span style="color:#f92672">&#34;textColor&#34;</span>: <span style="color:#e6db74">&#34;#dddddd&#34;</span>,
        <span style="color:#f92672">&#34;selectedColor&#34;</span>: <span style="color:#e6db74">&#34;#49a9ee&#34;</span>,
        <span style="color:#f92672">&#34;backgroundColor&#34;</span>: <span style="color:#e6db74">&#34;#ffffff&#34;</span>,
        <span style="color:#f92672">&#34;items&#34;</span>: [
            {
                <span style="color:#f92672">&#34;pagePath&#34;</span>: <span style="color:#e6db74">&#34;pages/index/index&#34;</span>,
                <span style="color:#f92672">&#34;name&#34;</span>: <span style="color:#e6db74">&#34;首页&#34;</span>,
                <span style="color:#f92672">&#34;icon&#34;</span>: <span style="color:#e6db74">&#34;xxxx&#34;</span>,
                <span style="color:#f92672">&#34;activeIcon&#34;</span>: <span style="color:#e6db74">&#34;xxx&#34;</span>
            },
            {
                <span style="color:#f92672">&#34;pagePath&#34;</span>: <span style="color:#e6db74">&#34;pages/logs/logs&#34;</span>,
                <span style="color:#f92672">&#34;name&#34;</span>: <span style="color:#e6db74">&#34;日志&#34;</span>,
                <span style="color:#f92672">&#34;icon&#34;</span>: <span style="color:#e6db74">&#34;xxxx&#34;</span>,
                <span style="color:#f92672">&#34;activeIcon&#34;</span>: <span style="color:#e6db74">&#34;xxx&#34;</span>
            }
        ]
    }
}
</code></pre></div><h2 id="参考资料">参考资料</h2>
<ol>
<li><a href="https://opendocs.alipay.com/mini/developer" title="支付宝开放平台">支付宝开放平台</a></li>
<li><a href="https://opendocs.alipay.com/mini/introduce/authcode" title="用户授权">用户授权</a></li>
<li><a href="https://opendocs.alipay.com/mini/introduce/twn8vq" title="获取会员基础信息">获取会员基础信息</a></li>
</ol>
<a href="https://gitee.com/liuz2/liuz2/blob/master/content/posts/alipay-mp-usage/index.md#tree_comm_title" class="no-underline db b--black pa2 tc bg-black-90" style="color:#eee;">进入留言</a><ul class="pa0">
  
   <li class="list dib">
     <a href="/tags/%E6%94%AF%E4%BB%98%E5%AE%9D%E5%B0%8F%E7%A8%8B%E5%BA%8F" class="link f5 grow no-underline br-pill ba ph3 pv2 mb2 dib black sans-serif">支付宝小程序</a>
   </li>
  
</ul>
<div class="mt6 instapaper_ignoref">
      
      
      </div>
    </div>

    <aside class="w-30-l mt6-l"><div class="bg-light-gray pa3 nested-list-reset nested-copy-line-height nested-links">
    <p class="f5 b mb3">目录</p>
      <nav id="TableOfContents">
  <ul>
    <li><a href="#用户授权">用户授权</a>
      <ul>
        <li><a href="#获取授权码">获取授权码</a></li>
        <li><a href="#获取会员基础信息">获取会员基础信息</a></li>
      </ul>
    </li>
    <li><a href="#支付">支付</a></li>
    <li><a href="#appjson-全局配置7">app.json 全局配置</a></li>
    <li><a href="#参考资料">参考资料</a></li>
  </ul>
</nav>
  </div>




</aside>

  </article>

    </main>
    <footer class="bg-black bottom-0 w-100 pa3" role="contentinfo">
  <div class="flex justify-between">
  <a class="f4 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="https://liuz2.gitee.io/" >
    &copy;  liuz2's Blog 2022 
  </a>
    <div>














</div>
  </div>
</footer>

    

  <script src="/dist/js/app.3fc0f988d21662902933.js"></script>


  </body>
</html>
